<template>
    <div id="hot">
        <div class="container">
            <!-- toubu -->
            <div class="title">
                <div class="txtbox">
                    热门资讯
                </div>
                <div class="more" @click="showMore">
                    更多>>
                </div>
            </div>
            <!-- content -->
            <div class="content" >
                <div class="artimg">
                    <el-carousel height="300px" >
                        <el-carousel-item v-for="item in banner" :key="item.pic">
                            <img :src="item.pic" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="art_list">
                    <div class="artitem" v-for="(item, index) in art" :key="index" @click="showArt(item.id)">
                        <span class="el-icon-document"></span>
                        <span class="innerTxt">{{ item.title }}  </span>
                        <span style="color: red;font-size:20px;margin-left:10px;" v-if="item.hot" class="iconfont icon-HOT-copy"></span>
                    </div>

                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                art: [],
                hotArt: [],
                companyArt: [],
                banner: []
            }
        },
        mounted () {
            this.getArtical();
            this.getLunbo()
        },
        methods: {
            // 获取热门资讯
            async getArtical() {
                let all = []
                this.hotArt = []
                this.companyArt = []
                let res = await this.$axios.post("/port/index/message", { key: this.$key, id: 0 })
                 console.log(res);
                all = res.data.data[0].children
                if (all.length >= 10) {
                    this.art = arr.slice(9)
                } else {
                    this.art = all
                }
                // console.log(this.art);
                
            },
            showArt( id ) {
                this.$router.push(`/artical/${id}/index`)
            },
            // 获取轮播
            async getLunbo() {
                this.banner = []
                let res = await this.$axios.post("/port/index/carousel", { key: this.$key })
                //console.log(res);
                let arr = res.data.data
                let code = res.data.code
                if (code == 200) {
                    arr.forEach( el => {
                        if (el.site == "0") {
                            this.banner.push(el)
                        }
                    })
                }
            },
            showMore() {
                this.$router.push("/moreArt/1")
            }
        },
    }
</script>

<style lang="scss" scoped>
#hot {
    width: 100%;
    margin: 10px auto;
    .container {
        width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        .title {
            width: 100%;
            border-bottom: 1px solid #f2f2f2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .txtbox {
                font-size: 20px;
                width: 90px;
                color: #333;
                border-bottom: 3px solid #ffaeac;
                text-align: center;
                line-height: 50px;
            }
            .more {
                font-size: 15px;
                color: #999;
                cursor: pointer;
                &:hover {
                    color: red;
                }
            }
        }
        .content {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            .artimg {
                width: 600px;
                height: 300px;
                border: 1px solid #333;
                overflow: hidden;
                img {
                    width: 600px;
                    height: 300px;
                }
            }
            .art_list {
                // margin-left: 30px;
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                margin-left: 30px;
                .artitem {
                    line-height: 20px;
                    width: 350px;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 10px;
                    align-items: center;
                    box-sizing: border-box;
                    height: 20px;
                    cursor: pointer;
                    .innerTxt {
                        max-width: 320px;
                        margin-left: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &:hover {
                            color: #409eff;
                            border-bottom: 1px solid #409eff;
                        }
                    }
                }
            }
        }
    }
}
</style>